<template>
  <div id="app">
    <h1>GitHub 数据分析</h1>
    <div class="filter-container">
      <label for="nation">选择国家:</label>
      <select v-model="selectedNation" @change="fetchDevelopers">
        <option value="">全部</option>
        <option value="中国">中国</option>
        <option value="美国">美国</option>
      </select>
      <input type="text" v-model="searchQuery" placeholder="按姓名或领域搜索" @input="fetchDevelopers" />
      <button @click="sortDevelopers">按人才排名排序</button>
    </div>
    <DeveloperList :developers="filteredDevelopers" @developer-click="showDetails" />
    <div v-if="selectedDeveloper" class="developer-details">
      <h2>开发者详情</h2>
      <p><strong>姓名:</strong> {{ selectedDeveloper.name }}</p>
      <p><strong>人才排名:</strong> {{ selectedDeveloper.talentRank }}</p>
      <p><strong>国家:</strong> {{ selectedDeveloper.nation }}</p>
      <p><strong>领域:</strong> {{ selectedDeveloper.field }}</p>
      <p><strong>信心:</strong> {{ selectedDeveloper.confidence || '无' }}</p>
      <button @click="closeDetails">关闭</button>
    </div>
  </div>
</template>

<script>
import DeveloperList from './components/DeveloperList.vue';

export default {
  components: {
    DeveloperList
  },
  data() {
    return {
      selectedNation: '',
      searchQuery: '',
      developers: [],
      selectedDeveloper: null
    };
  },
  computed: {
    filteredDevelopers() {
      return this.developers.filter(dev => {
        const matchesNation = !this.selectedNation || dev.nation === this.selectedNation;
        const matchesSearch = dev.name.includes(this.searchQuery) || dev.field.includes(this.searchQuery);
        return matchesNation && matchesSearch;
      });
    }
  },
  methods: {
    fetchDevelopers() {
      const allDevelopers = [
        { name: '爱丽丝', talentRank: 95, nation: '中国', field: 'Web 开发', confidence: 0.9 },
        { name: '鲍勃', talentRank: 90, nation: '美国', field: '数据科学', confidence: 0.85 },
        { name: '查理', talentRank: 85, nation: '中国', field: '移动开发', confidence: 0.8 },
        // 更多开发者...
      ];
      this.developers = allDevelopers.filter(dev => 
        !this.selectedNation || dev.nation === this.selectedNation
      );
    },
    sortDevelopers() {
      this.developers.sort((a, b) => b.talentRank - a.talentRank);
    },
    showDetails(developer) {
      this.selectedDeveloper = developer;
    },
    closeDetails() {
      this.selectedDeveloper = null;
    }
  },
  mounted() {
    this.fetchDevelopers();
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 30px;
}

.filter-container {
  margin-bottom: 20px;
}

select, button, input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

h1 {
  color: #42b983;
}

h2 {
  margin-top: 30px;
  color: #34495e;
}

.developer-details {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
}
</style>
